<template>
  <div>
    <div>
      <form action="#">
        <input type="text" class="commentInput" placeholder="请输入姓名" />
        <input type="text" class="commentInput" placeholder="请输入内容" />
        <button onclick="submitComment()">输入</button>
      </form>
    </div>
    <hr />
    <div>
      <ul id="list"></ul>
    </div>
  </div>
</template>

<script>
// import HelloWorld from "../components/HelloWorld.vue";
// import "../../utils/comment";
export default {
  name: "discuss",
  // data() {
  //   return {
  //     commentList: [],
  //     ulTag: document.getElementById("list"),
  //   };
  // },
  // mounted() {
  //   this.flushList();
  // },
  // methods: {
  //   // 刷新评论
  //   flushList() {
  //     var list = sessionStorage.getItem("discuss");
  //     if (list) {
  //       this.commentList = JSON.parse(list);
  //       this.flushListPos(this.commentList);
  //       this.ulTag.innerHTML = this.getComment(this.commentList);
  //     }
  //     // 为评论中的按钮绑定事件
  //     var viewButtons = document.getElementsByClassName("view");
  //     for (let i = 0; i < viewButtons.length; i++)
  //       viewButtons[i].addEventListener("click", function (e) {
  //         this.view(e.target.classList[1]);
  //       });
  //     var submitSubButtons = document.getElementsByClassName("subSubmit");
  //     for (let i = 0; i < submitSubButtons.length; i++)
  //       submitSubButtons[i].addEventListener("click", function (e) {
  //         this.submitSubComment(e.target.classList[1]);
  //       });
  //   },
  //   // 提交评论
  //   submitComment() {
  //     var e = document.getElementsByClassName("commentInput");
  //     if (e[0].value && e[1].value) {
  //       let dis = {
  //         name: e[0].value,
  //         content: e[1].value,
  //         in: [],
  //         pos: String(this.commentList.length),
  //       };
  //       this.commentList.unshift(dis);
  //       this.flushListPos(this.commentList);
  //       this.flushList();
  //     } else {
  //       alert("姓名或内容不能为空");
  //     }
  //   },
  //   // 取出评论
  //   getComment(list) {
  //     var liTag = "";
  //     if (list.length) {
  //       list.forEach((item) => {
  //         liTag +=
  //           '<li class="comment ' +
  //           item.pos +
  //           '">' +
  //           "<p>姓名：" +
  //           item.name +
  //           "</p>" +
  //           "<p>内容：" +
  //           item.content +
  //           '</p><span class="view ' +
  //           item.pos +
  //           '">[+]</span>' +
  //           '<div class="content" style="visibility: hidden;">' +
  //           '<form action="#">' +
  //           '<input type="text" class="' +
  //           item.pos +
  //           '" placeholder="请输入姓名"/>' +
  //           '<input type="text" class="' +
  //           item.pos +
  //           '" placeholder="请输入内容"/>' +
  //           '<button class="subSubmit ' +
  //           item.pos +
  //           '" onclick="submitSubComment("' +
  //           item.pos +
  //           '")">输入</button>' +
  //           "</form>" +
  //           "</div>" +
  //           "</li>";
  //         if (item.in.length)
  //           liTag += "<ul>" + this.getComment(item.in) + "</ul>";
  //       });
  //     }
  //     return liTag;
  //   },
  //   //刷新评论位置
  //   flushListPos(e, current = 0, pre = []) {
  //     e.forEach((item, index) => {
  //       var poss = item.pos.split("-");
  //       poss[current] = index;
  //       if (pre.length)
  //         pre.forEach((item2, index2) => {
  //           poss[index2] = item2;
  //         });
  //       item.pos = poss.join("-");
  //       if (item.in.length) {
  //         if (poss.length > 1) poss.pop();
  //         this.flushListPos(item.in, current + 1, poss);
  //       }
  //     });
  //     sessionStorage.setItem("discuss", JSON.stringify(this.commentList));
  //   },
  //   // 显示评论
  //   view(e) {
  //     var en = document.getElementsByClassName(e)[0];
  //     console.log(en.children);
  //     en.children[2].innerHTML =
  //       en.children[2].innerHTML == "[+]" ? "[-]" : "[+]";
  //     en.children[3].style.visibility =
  //       en.children[3].style.visibility === "hidden" ? "visible" : "hidden";
  //   },
  //   // 根据位置获取评论
  //   getCommentByPos(list, e) {
  //     var result;
  //     list.forEach((item) => {
  //       if (item.pos == e) result = item;
  //       if (item.in.length && !result)
  //         result = this.getCommentByPos(item.in, e);
  //     });
  //     return result ? result : "nothing";
  //   },
  //   // 提交子级评论
  //   submitSubComment(n) {
  //     var e = document.getElementsByClassName(n);
  //     if (e[2].value && e[3].value) {
  //       var subList = this.getCommentByPos(this.commentList, n);
  //       let dis = {
  //         name: e[2].value,
  //         content: e[3].value,
  //         in: [],
  //         pos: subList.pos + "-" + String(subList.in.length),
  //       };
  //       subList.in.unshift(dis);
  //       this.flushListPos(this.commentList);
  //       this.flushList();
  //     } else {
  //       alert("姓名或内容不能为空");
  //     }
  // },
  // }
};
</script>

<style>
.comment {
  list-style: none;
  border: 1px solid transparent;
  width: 30%;
  margin-bottom: 10px;
  padding: 10px;
}
.comment .view {
  cursor: pointer;
}
</style>
